<template>
	<view class="cake-item margin-bottom">
		<image :src="gdata.img" mode=""></image>
		<view class="flex justify-between align-center">
			<view class="">
				<view class="text-sm text-bold margin-top-xs">
					{{gdata.name}}
				</view>
				<view class="text-xs margin-tb-xs">
					{{gdata.french}}
				</view>
			</view>
			<view @click="handlePopShow" class="cart-btn flex justify-center align-center margin-right-xs">
				<text class="iconfont icon-gouwuche"></text>
			</view>
		</view>
		<view class="text-price">
			{{gdata.price}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"cake-item",
		props:{
			gdata:{
				type:Object,
				required:true
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			handlePopShow(){
				this.$store.commit('cart/cartPopDataMut',{
					cakeObj:this.gdata,
					editIdx:-1
				}) //设置弹窗数据
				this.$store.commit('cart/cartPopShowMut',true) //显示弹窗
			}
		}
	}
</script>

<style lang="scss">
.cake-item{
	width: 352upx;
	image{
		width: 100%;
		height: 352upx;
	}
	// margin-right: 16upx;
	// &:nth-of-type(2n){  //这个选择器会有兼容问题
	// 	margin-right: 0;
	// }
}
.cart-btn{
	height: 60upx;
	width: 60upx;
	background-color: #FFE329;
	border-radius: 50%;
}
</style>